<!-- https://www.51yunmai.com/tmsHtml/boyouzhixingTable.html?openid= -->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <title>拨油执行</title>
  <link rel="stylesheet" href="https://pyzl-static.oss-cn-guangzhou.aliyuncs.com/vendor/vant_2.12.54.css" />
  <style>
    /* 页面容器 */
    .page-container {
      padding: 0;
      height: 100vh;
      box-sizing: border-box;
      background-color: #f5f5f5;
      display: flex;
      flex-direction: column;
    }

    .van-collapse-item__content {
      padding: 0;
    }

    /* 表格样式 */
    .order-list {
      flex: 1;
      overflow-y: auto;
      padding: 0 10px;
      height: 100vh;
    }

    /* 订单项样式 */
    .order-item {
      /* background-color: #fff; */
      border-radius: 8px;
      margin-bottom: 10px;
      margin-top: 10px;
      overflow: hidden;
      background-image: linear-gradient(to right, #d4eaff, #f7fffe)
    }

    .order-header {
      padding: 3px;
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .detail-row {
      display: flex;
    }

    .detail-row-2 {
      display: flex;
      flex: 1;
    }

    .detail-label {
      color: #999;
      font-size: 12px;
      margin-bottom: 2px;
    }

    .detail-value {
      color: #333;
      font-size: 12px;
      word-break: break-all;
    }

    .status-caogao {
      background-color: #f6ffed;
      color: #67c23a;
      padding: 3px;
    }

    .status-defule {
      background-color: #f5f7fa;
      color: #909399;
      padding: 3px;
    }

    /* 备注弹框样式 */
    .popup-beizhu {
      width: 90%;
      max-width: 500px;
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      overflow: hidden;
    }
    
    .popup-header {
      padding: 16px 20px;
      border-bottom: 1px solid #f0f0f0;
      text-align: center;
      position: relative;
    }
    
    .popup-header h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }
    
    .popup-content {
      padding: 20px;
    }
    
    .popup-footer {
      padding: 0 20px 20px;
    }
    
    .popup-beizhu .van-field {
      margin-bottom: 0;
    }
    
    .popup-beizhu .van-field__label {
      color: #606266;
      font-weight: 500;
    }
    
    .popup-beizhu .van-field__label::after {
      content: ' *';
      color: #ee0a24;
    }
    
    .popup-beizhu .van-button {
      background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
      border: none;
      height: 44px;
      font-size: 16px;
      font-weight: 500;
      border-radius: 8px;
      transition: all 0.3s;
    }
    
    .popup-beizhu .van-button:active {
      transform: scale(0.98);
    }
    
    .popup-beizhu .van-popup__close-icon {
      top: 12px;
      right: 12px;
      width: 28px;
      height: 28px;
      line-height: 28px;
      border-radius: 50%;
      background-color: #f5f5f5;
    }
  </style>

<body>

  <div id="app">
    <div>
      <!-- <search-select-component :visible="isVisible" :data="defaleArr" :multiple="false" @confirm="handleConfirm"
        @close="handleClose" /> -->
    </div>
    <van-popup v-model="seacH_TopBox.chuangjianriqi" position="bottom">
      <van-calendar v-model="seacH_TopBox.chuangjianriqi" type="range" @confirm="onConfirm3" :min-date="minDate"
        :max-date="maxDate" />
    </van-popup>
    <van-popup v-model="seacH_TopBox.querenriqi" position="bottom">
      <van-calendar v-model="seacH_TopBox.querenriqi" type="range" @confirm="onConfirm2" :min-date="minDate"
        :max-date="maxDate" />
    </van-popup>
    <van-popup v-model="seacH_TopBox.chepaihaoma" position="bottom">
      <van-picker show-toolbar :columns="AllOptons.chepaihaoma" @confirm="onConfirm_chepaihaoma"
        @cancel="seacH_TopBox.chepaihaoma = false" />
    </van-popup>
    <van-popup v-model="seacH_TopBox.jiayouka" position="bottom">
      <van-picker show-toolbar :columns="AllOptons.jiayouka" @confirm="onConfirm_jiayouka"
        @cancel="seacH_TopBox.jiayouka = false" />
    </van-popup>
    <van-popup v-model="seacH_TopBox.querenzhuangtai" position="bottom">
      <van-picker show-toolbar :columns="AllOptons.querenzhuangtai" @confirm="onConfirm_querenzhuangtai"
        @cancel="seacH_TopBox.querenzhuangtai = false" />
    </van-popup>
    <van-popup v-model="seacH_TopBox.suoshugonshi" position="bottom">
      <van-picker show-toolbar :columns="AllOptons.suoshugonshi" @confirm="onConfirm_suoshugonshi"
        @cancel="seacH_TopBox.suoshugonshi = false" />
    </van-popup>
    <!-- 操作类型选择 -->
    <van-popup v-model="seacH_TopBox.mode" position="bottom">
      <van-action-sheet v-model="seacH_TopBox.mode" :actions="AllOptons.mode" @select="onClickLeixin"
        cancel-text="取消" />
    </van-popup>
    <!-- 备注弹框 -->
    <van-popup v-model="seacH_TopBox.beizhu" closeable class="popup-beizhu" @closed="closeRemark">
      <div class="popup-header">
        <h3>添加备注</h3>
      </div>
      <div class="popup-content">
        <van-field 
          v-model="beizhuneirong" 
          rows="5" 
          label="备注内容" 
          type="textarea" 
          maxlength="200" 
          placeholder="请输入详细备注信息，最多200字" 
          show-word-limit 
          required
          autosize
        >
        </van-field>
      </div>
      <div class="popup-footer">
        <van-button type="primary" @click="onRemark" block size="large">确认提交</van-button>
      </div>
    </van-popup>


    <div class="page-container">
      <van-collapse v-model="activeNames">
        <van-collapse-item title="查询">
          <div><van-cell title="创建日期" :value="seacH_Format.chuangjianriqi"
              @click="seacH_TopBox.chuangjianriqi = true" /></div>
          <div><van-cell title="确认日期" :value="seacH_Format.querenriqi" @click="seacH_TopBox.querenriqi = true" /></div>
          <div><van-cell title="车牌号码" :value="seacH_Format.chepaihaoma" @click="seacH_TopBox.chepaihaoma = true" />
          </div>
          <div><van-cell title="加油卡" :value="seacH_Format.jiayouka" @click="seacH_TopBox.jiayouka = true" /></div>
          <div><van-cell title="确认状态" :value="seacH_Format.querenzhuangtai"
              @click="seacH_TopBox.querenzhuangtai = true" /></div>
          <div><van-cell title="所属公司" :value="seacH_Format.suoshugonshi" @click="seacH_TopBox.suoshugonshi = true" />
          </div>
          <div> <van-field v-model="seacH_Format.zhixingbianhao" label="执行编号" /></div>
          <div style="text-align: right;    padding: 10px;">
            <van-button type="warning" size="small" @click="resetquery">重置</van-button>
            <van-button type="info" size="small" @click="searchTable">查询</van-button>
          </div>
        </van-collapse-item>
      </van-collapse>

      <div class="order-list">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-cell v-for="order in orderList" :key="order.SDLNID" class="order-item" @click="onClickItem(order)">
            <div class="order-header">
              <div class="order-id" style="color: rgb(106 66 66)">
                执行编号:<span>{{order.TurnOilExeNo}}</span>
              </div>
              <div :class="['order-status', conffeijgg(order.ConfirmState)]">
                {{order.ConfirmState}}
              </div>
            </div>
            <div class="order-detail">
              <div class="detail-row">
                <div class="detail-row-2">
                  <div class="detail-label">车牌号:</div>
                  <div class="detail-value">{{order.TruckNumber}}</div>
                </div>
                <div class="detail-row-2">
                  <div class="detail-label">加油卡:</div>
                  <div class="detail-value">{{order.GasStationName}}</div>
                </div>
              </div>
              <div class="detail-row">
                <div class="detail-row-2">
                  <div class="detail-label">单价:</div>
                  <div class="detail-value">{{order.TurnOilExePrice}}</div>
                </div>
                <div class="detail-row-2">
                  <div class="detail-label">拨油量(L):</div>
                  <div class="detail-value">{{order.TurnOilExeNum}}</div>
                </div>
              </div>

              <div class="detail-row">
                <div class="detail-row-2">
                  <div class="detail-label">金额:</div>
                  <div class="detail-value">{{order.TurnOilExeCost}}</div>
                </div>
                <div class="detail-row-2">
                  <div class="detail-label">备注:</div>
                  <div class="detail-value">{{order.TurnOilExeRemark}}</div>
                </div>
              </div>
              <div class="detail-row">
                <div class="detail-row-2">
                  <div class="detail-label">确认人:</div>
                  <div class="detail-value">{{order.ConfirmUserName}}</div>
                </div>
                <div class="detail-row-2">
                  <div class="detail-label">确认日期:</div>
                  <div class="detail-value">{{order.ConfirmTime}}</div>
                </div>
              </div>
              <div class="detail-row">
                <div class="detail-row-2">
                  <div class="detail-label">创建人:</div>
                  <div class="detail-value">{{order.CreateUserName}}</div>
                </div>
                <div class="detail-row-2">
                  <div class="detail-label">创建日期:</div>
                  <div class="detail-value">{{order.CreateDate}}</div>
                </div>
              </div>
              <div class="detail-row">
                <div class="detail-row-2">
                  <div class="detail-label">所属公司:</div>
                  <div class="detail-value">{{order.Company_Name}}</div>
                </div>
              </div>
          </van-cell>
        </van-list>
      </div>
    </div>
  </div>
  </div>
  <script src="https://wxapp.jsadf.com/vendor/vue2.prod.bundle.js"></script>
  <script src="https://pyzl-static.oss-cn-guangzhou.aliyuncs.com/vendor/vant.2.15.54.min.js"></script>
  <!-- <script src="./SeachComponent.js"></script> -->
  <script>
    function getQueryObject(url) {
      url = url == null ? window.location.href : url
      const search = url.substring(url.lastIndexOf('?') + 1)
      const obj = {}
      const reg = /([^?&=]+)=([^?&=]*)/g
      search.replace(reg, (rs, $1, $2) => {
        const name = decodeURIComponent($1)
        let val = decodeURIComponent($2)
        val = String(val)
        obj[name] = val
        return rs
      })
      return obj
    }
    function getOptVal(opt, val) {
      return opt.find(item => item.text === val).value;
    }

    function adapter(item) {
      let obj = {
        ID: item.Name,
        Name: item.Name,
      };
      return obj;
    }

    // 辅助函数：将.NET日期格式转换为年月日格式
    function formatDotNetDate(dotNetDate, is) {
      if (!dotNetDate || typeof dotNetDate !== "string") {
        return "";
      }

      try {
        // 提取时间戳数字部分
        const timestampMatch = dotNetDate.match(/\d+/);
        if (timestampMatch && timestampMatch.length > 0) {
          const timestamp = parseInt(timestampMatch[0]);
          const date = new Date(timestamp);

          // 格式化日期为YYYY-MM-DD HH:mm:ss格式
          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, "0");
          const day = String(date.getDate()).padStart(2, "0");
          const hours = String(date.getHours()).padStart(2, "0");
          const minutes = String(date.getMinutes()).padStart(2, "0");
          const seconds = String(date.getSeconds()).padStart(2, "0");

          if (is) {
            return `${year}-${month}-${day}`;
          } else {
            return `${year}-${month}-${day} ${hours}:${minutes}`;
          }
        }
      } catch (error) {
        console.error("日期格式转换失败:", error);
      }

      return dotNetDate; // 如果转换失败，返回原始值
    }
    function formatDateRange(dateArray) {
      // 定义中文月份名称
      const monthNames = [
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12",
      ];

      // 转换单个日期的函数
      const formatDate = (dateStr) => {
        const date = new Date(dateStr);
        const year = date.getFullYear();
        const month = monthNames[date.getMonth()]; // 月份从0开始，需转换
        const day = date.getDate().toString().padStart(2, "0"); // 确保两位日期
        return `${year}-${month}-${day}`;
      };

      // 处理输入数组
      return formatDate(dateArray);
    }
    new Vue({
      el: "#app",
      components: {
        // 局部注册组件
        SearchSelectComponent: window.SearchSelectComponent,
      },
      data() {
        return {
          isVisible: false,
          defaleArr: [{ text: "项目1", value: "项目1" },
          { text: "项目2", value: "项目2" },
          { text: "项目3", value: "项目3" },],
          activeNames: [],
          minDate: new Date(2024, 0, 1),
          maxDate: new Date(2026, 0, 31),
          openId: '',
          atPresentItem: '',
          beizhuneirong: '',
          seacH_TopBox: {
            chuangjianriqi: false,
            querenriqi: false,
            chepaihaoma: false,
            jiayouka: false,
            querenzhuangtai: false,
            suoshugonshi: false,
            mode: false,
            beizhu: false,
          },
          seacH_Format: {
            chuangjianriqi: '',
            querenriqi: '',
            chepaihaoma: '',
            jiayouka: '',
            querenzhuangtai: '',
            zhixingbianhao: '',
            suoshugonshi: '',
          },

          AllOptons: {
            mode: [
              {
                name: "确认",
              },
              {
                name: "取消确认",
              },
              {
                name: "备注",
              },
              {
                name: "删除", color: '#ee0a24'
              },
            ],
            chepaihaoma: [

            ],
            jiayouka: [

            ],
            querenzhuangtai: [
              {
                text: "已确认",
                value: "已确认",
              },
              {
                text: "未确认",
                value: "未确认",
              },
            ],
            suoshugonshi: [

            ],
          },
          //数据
          loading: false,
          finished: false,
          orderList: [
         
          ],
          pagination: {
            page: 1,
            rows: 10,
          },
        };
      },

      methods: {
        //查询下拉组件弹框的函数-----------------------start----------------------
        onClick_chepaihaoma() {
          this.defaleArr = this.AllOptons.chepaihaoma
          this.isVisible = true;
        },
        handleConfirm(selected) {
          console.log("选中的项目:", selected);
          this.isVisible = false;
          this.seacH_Format.chepaihaoma = selected[0].value
        },
        handleClose() {
          this.isVisible = false;
        },
        //查询下拉组件弹框的函数-----------------------end----------------------
        conffeijgg(status) {
          if (status == '已确认') {
            return "status-caogao";
          }
          else {
            return "status-defule";
          }
        },
        onConfirm3(date) {
          const [start, end] = date;
          this.seacH_TopBox.chuangjianriqi = false;
          this.seacH_Format.chuangjianriqi = `${formatDateRange(start)} → ${formatDateRange(end)}`;
        },
        onConfirm2(date) {
          const [start, end] = date;
          this.seacH_TopBox.querenriqi = false;
          this.seacH_Format.querenriqi = `${formatDateRange(start)} → ${formatDateRange(end)}`;
        },
        onConfirm_chepaihaoma(values) {
          this.seacH_Format.chepaihaoma = values.text;
          this.seacH_TopBox.chepaihaoma = false;
        },
        onConfirm_jiayouka(values) {
          this.seacH_Format.jiayouka = values.text;
          this.seacH_TopBox.jiayouka = false;
        },
        onConfirm_querenzhuangtai(values) {
          this.seacH_Format.querenzhuangtai = values.text;
          this.seacH_TopBox.querenzhuangtai = false;
        },
        onConfirm_suoshugonshi(values) {
          this.seacH_Format.suoshugonshi = values.text;
          this.seacH_TopBox.suoshugonshi = false;
        },
        resetquery() {
          // 重置查询条件
          this.seacH_Format.chuangjianriqi = '';
          this.seacH_Format.querenriqi = '';
          this.seacH_Format.chepaihaoma = '';
          this.seacH_Format.jiayouka = '';
          this.seacH_Format.querenzhuangtai = '';
          this.seacH_Format.zhixingbianhao = '';
          this.seacH_Format.suoshugonshi = '';
          this.loadOrderData()
        },
        searchTable() {
          // 提交逻辑
          console.log('打印结果~~', this.seacH_Format);
          this.loadOrderData()
        },
        onLoad() {
          console.log("触底");
          this.loadOrderData();
          this.pagination.rows += 10;
        },
        // 请求列表参数
        loadOrderData() {
          let f = this.seacH_Format;
          const submitData = {
            openid: this.openId,
            page: this.pagination.page,
            rows: this.pagination.rows,
          };
          //创建日期
          if (f.chuangjianriqi) {
            submitData.StartCreateDate = f.chuangjianriqi.split(' → ')[0];
            submitData.EndCreateDate = f.chuangjianriqi.split(' → ')[1];
          }
          //确认日期
          if (f.querenriqi) {
            submitData.StartConfirmTime = f.querenriqi.split(' → ')[0];
            submitData.EndConfirmTime = f.querenriqi.split(' → ')[1];
          }
          //车牌号
          if (f.chepaihaoma) {
            submitData.TruckNumber = f.chepaihaoma;
          }
          //加油卡
          if (f.jiayouka) {
            submitData.GasStationId = getOptVal(this.AllOptons.jiayouka, f.jiayouka);
          }
          //确认状态
          if (f.querenzhuangtai) {
            submitData.ConfirmState = f.querenzhuangtai;
          }
          //公司编码
          if (f.suoshugonshi) {
            submitData.Company_Code = getOptVal(this.AllOptons.suoshugonshi, f.suoshugonshi);
          }
          //执行编号
          if (f.zhixingbianhao) {
            submitData.TurnOilExeNo = f.zhixingbianhao;
          }
          try {
            axios
              .post(
                "/TurnOilRecord/GetTurnOilExecuteList",
                submitData,
                {
                  headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                  },
                }
              )
              .then((res) => {
                if (res.status === 200) {
                  let newOrderList = res.data.rows.map((order) => {
                    order.ConfirmTime = formatDotNetDate(order.ConfirmTime);
                    order.CreateDate = formatDotNetDate(order.CreateDate);
                    return order;
                  });
                  console.log('数据===', newOrderList)
                  this.orderList = newOrderList;
                  this.loading = false;
                  if (this.orderList.length >= res.data.total) {
                    this.finished = true;
                  }
                }
              });
          } catch (error) {
            console.error("请求失败", error);
            vant.Toast("请求失败");
          }

        },
        onClickItem(item) {
          this.seacH_TopBox.mode = true;
          this.atPresentItem = item;
        },
        closeRemark() {
          this.beizhuneirong = ''
        },
        onClickLeixin(e) {
          this.seacH_TopBox.mode = false;
          console.log('打印结果~~', e.name)
          if (e.name === '确认') {
            this.onConfirm(this.atPresentItem);
          } else if (e.name === '取消确认') {
            this.onNoConfirm(this.atPresentItem);
          } else if (e.name === '备注') {
            this.seacH_TopBox.beizhu = true
          } else if (e.name === '删除') {
            this.onDelete(this.atPresentItem);
          }
        },
        //确认接口
        async onConfirm(item) {
          axios
            .post(
              `/TurnOilRecord/TurnOilExecuteConfirmSave?ids=${item.TurnOilExeId}&openid=${this.openId}`,
              {
              }
            )
            .then((res) => {
              if (res.status !== 200) return vant.Toast('请求失败');
              vant.Toast(res.data.msg);
              this.resetquery();
            });
        },
        //取消确认接口
        async onNoConfirm(item) {
          axios
            .post(
              `/TurnOilRecord/TurnOilExecuteConfirmNoSave?ids=${item.TurnOilExeId}&openid=${this.openId}`,
              {
              }
            )
            .then((res) => {
              if (res.status !== 200) return vant.Toast('请求失败');
              vant.Toast(res.data.msg);
              this.resetquery();
            });
        },
        //删除接口
        async onDelete(item) {
          if (item.ConfirmState === '已确认') {
            vant.Toast("已确认的订单不允许删除");
            return;
          }
          axios
            .post(
              `/TurnOilRecord/DeleteTurnOilExecute?ids=${item.TurnOilExeId}&openid=${this.openId}`,
              {
              }
            )
            .then((res) => {
              if (res.status !== 200) return vant.Toast('请求失败');
              vant.Toast(res.data.msg);
              this.resetquery();
            });
        },
        //备注接口
        async onRemark() {
          if (!this.beizhuneirong) {
            vant.Toast("请输入备注");
            return;
          }
          axios
            .post(
              `/TurnOilRecord/SaveTurnOilExecuteRemarkById?remark=${this.beizhuneirong}&ids=${this.atPresentItem.TurnOilExeId}&openid=${this.openId}`,
              {
              }
            )
            .then((res) => {
              if (res.status === 200) {
                vant.Toast("操作成功");
                this.beizhuneirong = ''
                this.seacH_TopBox.beizhu = false
                this.resetquery();
              }
            });
        },
        async getCustomerCode() {
          //加油站
          const res = await axios.post(
            "/PublicAttribute/GetPublicAttributesTrue?openid=" + this.openId + "&typeId=1000&IsTrue=1",
            {},
            {}
          );
          if (res.status === 200) {
            this.AllOptons.jiayouka = res.data.map(
              (item) => {
                return {
                  text: item.Name,
                  value: item.Id,
                }
              }
            );
          }
          //所属组织
          const res2 = await axios.post(
            "/CombBox/GetCusCompany?openid=" + this.openId + "&Companylist=",
            {},
            {}
          );
          if (res2.status === 200) {
            this.AllOptons.suoshugonshi = res2.data.map(
              (item) => {
                return {
                  text: item.Company_Name,
                  value: item.Company_Code,
                }
              }
            );
          }
          //车牌号
          const res3 = await axios.post(
            "/CombBox/GetCarForTDbyNum?openid=" + this.openId,
            {},
            {}
          );
          if (res3.status === 200) {
            this.AllOptons.chepaihaoma = res3.data.map(
              (item) => {
                return {
                  text: item.EQ_TruckNumber,
                  value: item.EQ_TruckNumber,
                }
              }
            );
            if (this.AllOptons.chepaihaoma.length > 0) {
              this.AllOptons.chepaihaoma.shift()
            }
          }
        },
      },
      created() {
        let query = getQueryObject()
        this.openId = query.openid;
        this.getCustomerCode()
      },
    });
  </script>
</body>
</head>

</html>